<!--
 * createor: zc
 * email: zc8023zs@163.com
 * create_time: 2020/3/14 13:46:24
 *-->
<template>
<el-container>
	<el-main>
		<el-form ref="dataForm" :model="formData" label-width="200px" style="padding:5% 5% 0 5%">
          <el-form-item>
            <el-button type="primary" icon="el-icon-edit" @click="onSave" :loading="saveLoading">{{$t('table.save')}}</el-button>
          </el-form-item> 
          <input type="hidden" v-model="formData.class_id"/>
        <el-form-item label="评论设置：">
            <el-select v-model="formData.comment_control" placeholder="请选择">
                <el-option
                  v-for="item in comment_controlSelectData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="浏览设置：">
            <el-select v-model="formData.view_control" placeholder="请选择">
                <el-option
                  v-for="item in view_controlSelectData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
          <input type="hidden" v-model="formData.wf_id"/>
        <el-form-item label="栏目图片：">
          <div class="avatar-uploader">
            <div class="el-upload el-upload--text">
              <el-upload
                class="avatar-uploader"
                accept="image/png, image/jpeg"
                action = ""
                :show-file-list="false"
                :before-upload="iconBeforeAvatarUpload"> 
                <img v-if="formData.icon" :src="uploadrooturl+formData.icon" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="栏目描述：">
          <el-input type="textarea" :rows="2" v-model="formData.description" placeholder="请输入栏目描述"></el-input>
        </el-form-item>
        <el-form-item label="外部链接：">
          <el-input v-model="formData.link" placeholder="请输入外部链接"></el-input>
        </el-form-item>
        <el-form-item label="打开方式：">
            <el-select v-model="formData.target" placeholder="请选择">
                <el-option
                  v-for="item in targetSelectData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="页行数：">
          <el-input-number v-model="formData.page_size" :min="0" :max="99999999999" :precision="0"></el-input-number>
        </el-form-item>
        <el-form-item label="是否分页：">
          <el-radio-group v-model="formData.list_channel">
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
          <el-radio-group v-model="formData.list_channel">
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
          <input type="hidden" v-model="formData.version_id"/>
		</el-form>
	</el-main>
</el-container>
</template>
<style scoped>
body .app-container .el-container,
body .app-container .el-header,
body .app-container .el-main,
body .el-container,
body .el-header,
body .el-main {
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<script>
import {
  article_class_exSelecttree,
  article_class_exSelectpage,
  article_class_exSelect,
  article_class_exAdd,
  article_class_exUpdate,
  article_class_exDel,
  article_class_exInfo
} from '@/api/project/article/project_article_article_class_ex'
import { fileUp,fileUpInfo } from "@/api/project/system/project_sys_sys_upload";
export default {
  name: "a_articlea_article_class_ex_edit",
  components: {  },
  data() {
    return {
      curdAction: "",
      saveLoading: false,
      uploadrooturl: "",
      formData: {
        class_id: null, 
        comment_control: null, 
        view_control: null, 
        wf_id: null, 
        icon: null, 
        description: null, 
        link: null, 
        target: null, 
        page_size: null, 
        list_channel: null, 
        version_id: null, 
    },
      comment_controlSelectData: [
        {value: 1,label: '允许游客评价'},
        {value: 2,label: '登录后评论'},
        {value: 3,label: '不允许评论'},
      ],
      view_controlSelectData: [
        {value: 1,label: '都不需要登录'},
        {value: 2,label: '仅内容页需要登录'},
        {value: 3,label: '都需要登录'},
      ],
      targetSelectData: [
        {value: 1,label: '新窗口打开'},
      ],
    }
  },
  created(){
    var result = location.search.match(new RegExp("[\?\&]id=([^\&]+)", "i"));
    this.formData.class_id=result[1];
    fileUpInfo().then(r=>{
        this.uploadrooturl = r.dataSingle.urlroot;
        this.onInfo(this.formData);
    });
  },
  methods:{
    iconHandleAvatarSuccess(r, file){
      this.formData.icon = r.dataSingle.videopath;
    },
    iconBeforeAvatarUpload(file){
      const formData = new FormData();
      formData.append('file', file);
      fileUp(formData,function(progressEvent){
      }).then(r => {
         this.iconHandleAvatarSuccess(r, file);
      }).catch(err => {
        console.log(err);
      });
      return false;
    },
    onSearch(){
      this.listQuery.page=1;
      this.getList();
    },
    onInfoPage(scope){
      var view = this.$store.state.permission.routesMap["/article/article_class_ex_info"];
      this.$router.push({ path: view.path, query: {m_id:view.code_aes,id:scope.row.class_id} })
    }, 
    reset(){
      this.formData = {
        class_id: null, 
        comment_control: null, 
        view_control: null, 
        wf_id: null, 
        icon: null, 
        description: null, 
        link: null, 
        target: null, 
        page_size: null, 
        list_channel: null, 
        version_id: null, 
      };
 
    },
    onSave(){
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.saveLoading = true;
          if (this.curdAction == "add") {
            article_class_exAdd(this.$qs.stringify(this.formData)).then(r => {
                this.formData.class_id=r.dataSingle;
                this.curdAction = 'update';
                this.saveLoading  = false;
                this.$notify({
                  title: "添加成功",
                  type: "success",
                  duration: 2000
                });
                var that = this;
                setTimeout(function(){ 
                  that.closeSelectedTag();
                },2000);
            }).catch(()=>{
              this.saveLoading=false;
            });
          } else if (this.curdAction == "update") {
            article_class_exUpdate(this.$qs.stringify(this.formData)).then(r => {
                this.saveLoading  = false;
                this.$notify({
                  title: "修改成功",
                  type: "success",
                  duration: 2000
                });
                var that = this;
                setTimeout(function(){ 
                  that.closeSelectedTag();
                },2000);
            }).catch(()=>{
              this.saveLoading=false;
            });
          }
        }
      });
    },
    onInfo(data){
        article_class_exInfo({id:data.class_id}).then(r=>{
          if(r.dataSingle==null){
            this.curdAction = "add";
            return false;
          }
            this.formData.class_id=r.dataSingle.class_id;
            this.formData.comment_control=r.dataSingle.comment_control;
            this.formData.view_control=r.dataSingle.view_control;
            this.formData.wf_id=r.dataSingle.wf_id;
            this.formData.icon=r.dataSingle.icon;
            this.formData.description=r.dataSingle.description;
            this.formData.link=r.dataSingle.link;
            this.formData.target=r.dataSingle.target;
            this.formData.page_size=r.dataSingle.page_size;
            this.formData.list_channel=r.dataSingle.list_channel;
            this.formData.version_id=r.dataSingle.version_id;
            this.curdAction = "update";
        });
    },
    closeSelectedTag() {
      var view = this.$store.state.permission.routesMap["/article/article_class_ex_edit"];
      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
        if (this.isActive(view)) {
          this.toLastView(visitedViews, view)
        }
      })
    },
    toLastView(visitedViews, view) {
      const latestView = visitedViews.slice(-1)[0]
      if (latestView) {
        this.$router.push(latestView.fullPath)
      } else {
        if (view.name === 'Dashboard') {
          this.$router.replace({ path: '/redirect' + view.fullPath })
        } else {
          this.$router.push('/')
        }
      }
    },
    isActive(route) {
      return route.path === this.$route.path
    },
  }
}
</script>